import React from "react";
import { TYPES_LEVEL } from "./common";

export default function AdaptiveTitle({ item }) {
  const titles = {
    1: (
      <h1
        style={{
          fontSize: "36px",
          fontWeight: "bold",
          paddingLeft: 0,
          paddingBottom: "35px",
        }}>
        {item.title}
      </h1>
    ),
    2: (
      <h2
        style={{
          fontSize: "28px",
          fontWeight: "bold",
          paddingLeft: 0,
          paddingBottom: "30px",
        }}>
        {item.title}
      </h2>
    ),
    3: (
      <h3
        style={{
          fontSize: "26px",
          fontWeight: "bold",
          paddingLeft: "4px",
          paddingBottom: "25px",
        }}>
        {item.title}
      </h3>
    ),
    4: (
      <h4
        style={{
          fontSize: "24px",
          fontWeight: "bold",
          paddingLeft: "8px",
          paddingBottom: "20px",
        }}>
        {item.title}
      </h4>
    ),
    5: (
      <h5
        style={{
          fontSize: "22px",
          fontWeight: "bold",
          paddingLeft: "12px",
          paddingBottom: "15px",
        }}>
        {item.title}
      </h5>
    ),
    6: (
      <h6
        style={{
          fontSize: "18px",
          fontWeight: "bold",
          paddingLeft: "16px",
          paddingBottom: 0,
        }}>
        {item.title}
      </h6>
    ),
  };
  return titles[TYPES_LEVEL[item.type]];
}
